<template>
	<view class="container">
		<scroll-view class="container" scroll-y="true">
			<view class="main">
				<!--header-->
				<view class="tui-header-banner" >
					<!-- 轮播楼层 -->
					<view class="tui-banner-bg">
						<view class="tui-banner-box">
							<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150"
								class="tui-banner-swiper" :circular="true" indicator-color="rgba(255, 255, 255, 0.8)"
								indicator-active-color="#fff">
								<swiper-item>
									<image :src="act.listPicUrl" background-size="cover" :data-img="act.listPicUrl"
										@tap.stop="previewImg" class="tui-slide-image" mode="scaleToFill" />
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
				<view class="nav">
					<view class="header">
						<view class="flex justify-sb align-center pd-10" style="width: 682rpx;">
							<view class="flex flex-col align-start">
								<text class="shops-name">{{ act.name||''}}</text>
							</view>
						</view>
						
						<!-- 分割线 -->
						<tui-divider dividerColor="#DCDCDC" width="100%" height="40" style="width:100%"></tui-divider>
						
						<!-- 搜索框 -->
						<view class="tui-searchbox">
							<view class="tui-search-input" @tap="search" style="width: 80%;">
								<icon type="search" :size="13" color="#999" style="margin-left:10px;"></icon>
								<input class="tui-search-text" v-model="textStr" placeholder="请输入证件号"></input>
							</view>
							<tui-button @click="selectDate()" style="padding-left: 20px; width: 60px; height: 80rpx;padding-left: 10px;padding-right: 10px;" height="80rpx">搜索</tui-button>
						</view>
					</view>
					<view class="goods-list">
						<div class="mg-l-10"></div>
						<block v-for="(item, index) in dataList" :key="index">
							<view clclass="flex justify-start align-center font-16" v-if="index!=0" style="width: 682rpx;">
								<tui-divider dividerColor="#DCDCDC" width="100%" height="40"></tui-divider>
							</view>
							<!--商品列表-->
							<view class="tui-item-box flex flex-col justify-start align-center" hover-class="hover"
								:hover-start-time="150" @tap="buyGoods(item)">
								<div class="flex flex-col" style="width:750rpx;">
									<view class="tui-title mg-t-10 mg-l-10">{{item.name || ''}}</view>
									<div class="flex mg-l-10">
										<div class="flex flex-col" style="width:550rpx;">
											<!-- <view class="tui-sub-title mg-tb-5" v-if="item.payStatus ==1">未付款 </view>
											<view class="tui-sub-title mg-tb-5" v-if="item.payStatus ==3">已付款 </view> -->
											<view class="flex mg-tb-5 font-14" style="color: #858585;">{{item.groupName}}
												<!-- <div class="buy-notice" @tap.stop="buyNotice(item)">购买须知></div> -->
											</view>
											<!-- <view class="tui-promotion mg-tb-5">闪入园 随买随用 10秒出票</view> -->
										</div>
					
										<view class="flex flex-col" style="width:200rpx;">
											<view class="tui-price flex justify-end">
												<text class="tui-sale-price">￥{{item.actualPrice || ''}}</text>
												<!-- <text class="tui-unit">起</text> -->
											</view>
											<div class="flex align-start pd-l-5" v-if="item.payStatus ==1">
												<div class="tui-cart flex justify-center align-center">未付款</div>
											</div>
											<div class="flex align-start pd-l-5" v-if="item.payStatus ==3">
												<div class="tui-cart flex justify-center align-center">已付款</div>
											</div>
										</view>
									</div>
								</div>
							</view>
						</block>
					</view>
				</view>
			</view>
			<!-- content end -->
			<tui-bottom-popup :show="shareVisible" class="tui-popup" @close="hideShare">
				<view class="share-bottom">
					<view class="share-bottom-footer">
						<view class="share-to">分享到</view>
						<view class="imgs">
							<!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
							<button class="btn-share" open-type="share">
								<image class='sharebtn_image' src='/static/images/mall/weixin.png'></image>
							</button>
							<button class="btn-share" @tap="pengyouquan">
								<image class='sharebtn_image' src='/static/images/mall/pengyouquan.png'></image>
							</button>
							<!-- #endif -->

							<!-- #ifdef APP-PLUS -->
							<button class="btn-share" @tap="shareApp">
								<image class='sharebtn_image' src='/static/images/mall/weixin.png'></image>
							</button>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN || APP-PLUS || H5 -->
							<!-- <button class="btn-share" @tap="createPoster">
								<image class='sharebtn_image' src='/static/images/mall/haibao.png'></image>
							</button> -->
							<!-- #endif -->
						</view>
						<button class="btn-share" @tap="hideShare">取消</button>
					</view>
				</view>
			</tui-bottom-popup>
		</scroll-view>
	</view>
</template>

<script>
	
	import uParse from '@/components/uni/u-parse/u-parse.vue'
	import CouponTake from '@/pagesA/components/coupon-take.vue'
	const poster = require('@/components/common/tui-poster/tui-poster.js');
	const util = require("@/utils/util.js")
	export default {
		components: {
			uParse,
			CouponTake
		},
		data() {
			return {
				openAttr: false,
				collectBackImage: "/static/images/mall/icon_collect.png",
				shopsSn: '',
				shopsId: '',
				shopsVo: {},
				distant: '',
				banner: [],
				shareVisible: false,
				modalShow: false,
				actId:'',
				act: {},
				dataList:[],
				textStr:''
			}
		},
		methods: {
			// 立即报名
			buyGoods: function(item) {
				// uni.navigateTo({
				// 	url: '/pagesA/activities/groupsubmit?title='+item.name+'&actId='+this.actId+'&gId='+item.id,
				// })
			},
			selectDate() {
				
				let that = this;
				console.log(that.textStr)
				let idcard = that.textStr;
				util.request('activities/selectByCard', {
					idcard: idcard
				}).then(function(res) {
					if (res.code == 0) {
						console.log(res.data);
						that.dataList = res.data
					}
				});
			},
			//切换tab，逻辑请自行处理
			change(e) {
				let that = this;
				console.log(e.index);
				this.tabIndex = e.index
			},
			//放大预览轮播图片
			previewImg: function(e) {
				var curImg = e.currentTarget.dataset.img;
				var banner = this.banner;
				if (!util.isEmpty(curImg) && banner.length > 0) {
					var urls = [];
					for (var i = 0; i < banner.length; i++) {
						urls[i] = banner[i].url;
					}
					uni.previewImage({
						current: curImg, // 当前显示图片的http链接
						urls: urls, // 需要预览的图片http链接列表
					})
				}
			},
			showShare: function() {
				// #ifdef MP-ALIPAY
				uni.showShareMenu()
				// #endif
				// #ifdef MP-TOUTIAO
				util.toast('请点击右上角分享')
				// #endif
				// #ifndef MP-ALIPAY || MP-TOUTIAO
				this.menuShow = false
				this.shareVisible = true
				// #endif
			},
			hideShare: function() {
				this.shareVisible = false
			},
			hideModal() {
				this.modalShow = false;
				this.shareVisible = false
			},
			showSharePopup() {
				this.sharePopup = true
			},
			hideSharePopup() {
				this.sharePopup = false
			},
			pengyouquan() {
				util.toast('请点击右上角分享到朋友圈')
				this.shareVisible = false
			},
			async createPoster() {
				let that = this
				that.hideSharePopup()
				if (that.posterImg) {
					that.modalShow = true;
					return;
				}
				uni.showLoading({
					mask: true,
					title: '图片生成中...'
				});
				// #ifdef MP-WEIXIN
				await poster.removeSavedFile();
				// #endif

				//小程序码长宽
				let codeSize = 200;
				util.request('goods/getGoodsQrCode', {
					goodsId: that.goods.id,
					width: codeSize
				}).then(function(resp) {
					if (resp.code === 0) {
						uni.downloadFile({
							//url网络图片地址必须要在小程序中配备合法域名
							url: resp.url,
							success(res) {
								if (res.statusCode === 200) {
									that.tempQrCode = res.tempFilePath

									const imgs = {
										mainPic: that.tempGoodsListPic,
										qrcode: that.tempQrCode
									};
									poster.drawGoodsPoster('posterId', that.winWidth, that.winHeight,
										imgs, that.goods.name, that.goods.retailPrice, that.goods
										.marketPrice, that.goods
										.promotionDesc || '',
										res => {
											uni.hideLoading();
											if (res) {
												that.posterImg = res;
												setTimeout(() => {
													that.modalShow = true;
												}, 60);
											} else {
												util.toast('生成海报失败,请稍后再试');
											}
										});
								}
							}
						})
					}
				});
			},


			getShopsDetail: function() {
				let that = this;
				// util.request('shops/detailBySn', {
				util.request('shops/detailById', {
					shopsId: that.shopsId
				}).then(function(res) {
					if (res.code === 0) {
						that.shopsVo = res.data
						if (that.shopsVo.imgBanner) {
							that.banner = JSON.parse(that.shopsVo.imgBanner)
						}
						that.getGoodsList(that.shopsVo.id)
						uni.getLocation({
							type: 'gcj02',
							success(data) {
								let shopsVo = res.data;
								that.distant = util.getDistance(data.latitude, data.longitude,
									shopsVo.latitude, shopsVo.longitude)
								that.shopsVo = shopsVo
							}
						})
					} else {
						//显示错误信息
						util.toast(res.errmsg);
					}
				});
			},
			closeAttrOrCollect: function() {
				let that = this;
				//添加或是取消收藏
				util.request('user/addOrDelete', {
					goodsId: that.id
				}, "POST").then(function(res) {
					if (res.code == 0) {
						if (res.data.type == 'add') {
							util.toast('收藏成功');
							that.collectBackImage = "/static/images/mall/icon_collect_checked.png";
						} else {
							util.toast('取消成功');
							that.collectBackImage = "/static/images/mall/icon_collect.png"
						}
					}
				});
			},
			getGoodsList(shopsId) {
				var that = this
				util.request('scenicOrder/skuList', {
					shopsId: shopsId
				}).then(function(res) {
					if (res.code === 0) {
						that.goodsList = res.goodsList
					}
				});
			},
			goHere: function(e) {
				uni.openLocation({
					name: e.currentTarget.dataset.name,
					address: e.currentTarget.dataset.address,
					latitude: parseFloat(e.currentTarget.dataset.latitude),
					longitude: parseFloat(e.currentTarget.dataset.longitude)
				})
			},
			openCall: function(e) {
				uni.makePhoneCall({
					phoneNumber: e.target.dataset.phone
				})
			},
			getDataList(id) {
				var that = this
				util.request('activities/detail', {
					id: id
				}).then(function(res) {
					if (res.code == 0) {
						that.act = res.data
					}
				});
			},
		},
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: options.title
			});
			this.actId = options.id;
			this.getDataList(options.id);
			//this.groupList(options.id);
		},
		onShareAppMessage: function() {
			var that = this;
			return {
				title: that.shopsVo.name,
				desc: that.shopsVo.details,
				path: '/pagesA/scenic/shops?shopsSn=' + that.shopsSn + "&shopsId=" + that.shopsId
			}
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			// 显示顶部刷新图标
			uni.showNavigationBarLoading();
			this.getShopsDetail();
			// 隐藏导航栏加载框
			uni.hideNavigationBarLoading();
			// 停止下拉动作
			uni.stopPullDownRefresh();
		}
	}
</script>
<style lang="scss" scoped>
	/*底部选择弹层*/

	.tui-popup {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.share-bottom {
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 999999;
		left: 0;
		bottom: 0;
		position: relative;
		padding: 60rpx 0 400rpx 0;
	}

	.share-bottom-footer {
		background-color: #FFF;
		align-items: center;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}

	.share-to {
		padding-top: 30rpx;
		font-size: x-large;
		text-align: center;
		width: 100%;
	}

	.imgs {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sharebtn_image {
		width: 200rpx;
		height: 200rpx;
	}

	.btn-share {
		height: auto;
		font-size: x-large;
		background-color: #fff;
	}

	/** 底部工具栏 **/
	.bottom-btn {
		border: 1px solid #f4f4f4;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		background: #fff;
		padding-bottom: 20rpx;
	}

	.bottom-btn .l {
		float: left;
		height: 100rpx;
		width: 100rpx;
		/* #ifdef MP-ALIPAY */
		width: 200rpx;
		/* #endif */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom-btn .l.l-collect {
		text-align: center;
	}

	.bottom-btn .l.l-cart .box {
		position: relative;
		height: 60rpx;
		width: 60rpx;
	}

	.bottom-btn .l.l-cart .cart-count {
		height: 28rpx;
		width: 28rpx;
		z-index: 10;
		position: absolute;
		top: 0;
		right: 0;
		text-align: center;
		font-size: 18rpx;
		color: #fff;
		line-height: 28rpx;
		border-radius: 50%;
	}

	.bottom-btn .l.l-cart .icon {
		position: absolute;
		top: 10rpx;
		left: 0;
	}

	.bottom-btn .l .icon {
		display: block;
		height: 44rpx;
		width: 44rpx;
	}

	.bottom-btn .contact {
		float: left;
		height: 100rpx;
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/** 底部工具栏 **/

	.container {
		height: 100%;
	}

	page {
		min-height: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	.tui-banner-bg {
		display: flex;
		height: 380rpx;
		position: relative;
	}

	.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}

	.tui-banner-box {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: absolute;
		/* overflow: hidden; */
		z-index: 99;
		//bottom: -80rpx;
		left: 0;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 380rpx;
		/* #ifdef H5 */
		height: 440rpx;
		/* #endif */
		border-radius: 12rpx;
		overflow: hidden;
		transform: translateY(0);
	}

	.tui-slide-image {
		width: 100%;
		height: 380rpx;
		display: block;
	}

	/* #ifdef MP-WEIXIN */
	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background-color: #fff;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */

	.tui-icon {
		font-size: 30rpx;
	}

	.loading {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 260rpx;
			height: 260rpx;
			position: relative;
			margin-top: -200rpx;
			/* #ifdef h5 */
			margin-top: 0;
			/* #endif */
		}
	}

	.main {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;

		.bg-img {
			width: 750rpx;
			height: 600rpx;
		}
	}

	.nav {
		width: 100%;
		z-index: 99;
		height: 600rpx;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;


		.header {
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;
			background-color: #ffffff;
			border-radius: 20rpx 20rpx 0px 0px;

			.shops-name {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.shops-desc {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.shops-nav {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.shops-addr {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}

			.line {
				width: 1rpx;
				height: 40rpx;
				background: #BFBFBF;
			}

			.store-location {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
		}
	}
	
	/**********搜索框*****************************/
	.tui-searchbox {
		width: 100%;
		height: 92rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
	}
	
	.tui-searchbox::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #d2d2d2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}
	
	.tui-search-input {
		width: 100%;
		height: 80rpx;
		background: #f1f1f1;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #999;
		display: flex;
		align-items: center;
		
	}
	
	.tui-search-text {
		padding-left: 16rpx;
	}
	/**********搜索框*****************************/
</style>